<template>
	<view class="coupon-item">
		<view :class="[status ? 'coupon-canuse': 'coupon-diabled' ,'u-flex', 'u-row-between']">
			<slot></slot>
			<view class="u-flex l">
				<view class="price">
					<text class="font-24">￥</text>
					<text class="denomination">230</text>
				</view>
				<view class="rang font-24">满3000减300可用</view>
			</view>
			<view class="u-flex-1 m">
				<view class="name">【至尊购优惠券】</view>
				<view class="des">仅限快步app购物使用</view>
				<view class="time">有效期至  2021.12.31</view>
			</view>
			<u-button type="warning" :disabled="!status" size="mini" shape="circle">立即使用</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: false
			}
		}
	}
</script>

<style scoped lang="scss">
	.coupon-item {
		position: relative;
		margin-bottom: 20rpx;
		
		background-color: #F8F6F6;
		
		border-radius: 20rpx;
		overflow: hidden;
		.price {
			color: $u-type-warning;
		}
		.denomination {
			font-size: 50rpx;
		}
		.rang {
			padding-bottom: 10rpx;
		}
		.l {
			padding-right: 20rpx;
			border-right: 1rpx solid #999999;
			flex-direction: column;
		}
		.m {
			margin-left: 20rpx;
			font-size: 24rpx;
			color: #000000;
			.name {
				font-size: 30rpx;
			}
			.des {
				color: $u-type-warning;
			}
			
		}
		.coupon-canuse {
			padding: 50rpx 20rpx;
			border: 2rpx dotted $u-type-warning;
		} 
		.coupon-diabled {
			padding: 50rpx 20rpx;
			border: 2rpx dotted #ADADAD;
			.rang,
			.price,
			.name,
			.des,
			.time{
				color: #ADADAD;
			}
		}
	}
</style>
